import React from 'react'
import { Card, Tabs, Divider } from 'antd-mobile'
import TabBar1 from '../../components/TabBar/TabBar'
export default function ShippingAddress() {
    let list = [
        { name: '李梅烧烤', time: '2024-3-2 10:00:00', ment: '申请中', notes: '审核中' },
        { name: '李梅烧烤', time: '2024-3-2 10:00:00', ment: '已通过', notes: '已完成' },
        { name: '李梅烧烤', time: '2024-3-2 10:00:00', ment: '未通过', notes: '资料不足' },
    ]
    return (
        <div style={{ background: 'linear-gradient(to bottom, rgb(255,102,0), rgb(246,246,246))', }}>
            {/* 顶部 */}
            <div style={{ padding: '6% 0', textAlign: 'center', color: 'white', fontSize: 'large', fontWeight: 'bold' }}>商家入驻</div>
            {/* 商家入驻卡片 */}
            <Card style={{ margin: '2% auto', backgroundColor: 'rgb(248,248,248)', width: '90%', }}>
                <Tabs style={{ '--active-line-color': 'rgb(255,102,0)', '--active-title-color': 'rgb(255,102,0)' }}>
                    <Tabs.Tab title='申请中' key='sqz'>
                        {list.map((item, index) => (
                            item.ment == '申请中' && (
                                <Card key={index} style={{ marginBottom: '3%' }}>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>店铺名称：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.name}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>申请时间：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.time}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>当前状态：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.ment}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>当前进度：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.notes}</div>
                                    </div>
                                    <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
                                    <div style={{ textAlign: "right" }}><button style={{ border: '0', borderRadius: '5px', backgroundColor: 'rgb(255,102,0)', color: 'white' }}>取消申请</button></div>
                                </Card>
                            )
                        ))}
                    </Tabs.Tab>
                    <Tabs.Tab title='已通过' key='ytg'>
                        {list.map((item, index) => (
                            item.ment == '已通过' && (
                                <Card key={index} style={{ marginBottom: '3%' }}>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>店铺名称：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.name}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>申请时间：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.time}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>当前状态：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.ment}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>当前进度：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.notes}</div>
                                    </div>
                                    <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
                                    <div style={{ display: 'flex',justifyContent:'right' }}>
                                        <div><button style={{ border: '0', borderRadius: '5px', backgroundColor: 'white', color: 'rgb(255,102,0)' }}>取消申请</button></div>
                                        <div><button style={{ border: '0', borderRadius: '5px', backgroundColor: 'rgb(255,102,0)', color: 'white' }}>支付金额</button></div>
                                    </div>
                                </Card>
                            )
                        ))}
                    </Tabs.Tab>
                    <Tabs.Tab title='未通过' key='wtg'>
                        {list.map((item, index) => (
                            item.ment == '未通过' && (
                                <Card key={index} style={{ marginBottom: '3%' }}>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>店铺名称：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.name}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>申请时间：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.time}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>当前状态：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.ment}</div>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                        <div>未通过原因：</div>
                                        <div style={{ color: 'rgb(153,153,153)' }}>{item.notes}</div>
                                    </div>
                                    <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
                                    <div style={{ display: 'flex',justifyContent:'right' }}>
                                        <div><button style={{ border: '0', borderRadius: '5px', backgroundColor: 'white', color: 'rgb(255,102,0)' }}>重新申请</button></div>
                                        <div><button style={{ border: '0', borderRadius: '5px', backgroundColor: 'rgb(255,102,0)', color: 'white' }}>取消申请</button></div>
                                    </div>
                                </Card>
                            )
                        ))}
                    </Tabs.Tab>
                </Tabs>
            </Card>
            <TabBar1></TabBar1>
        </div>
    )
}